<template>
    <div>
      <div class="centered-container">
        <img src="../../../static/线条 1@1x.png" alt="">
        <span style="margin-left: 10px; font-size: 30px; color: #415058; font-weight: bold;">练习情况</span>
      </div>
  
      <div class="chart-container">
        <div class="chart" id="question_done"></div>
        <div class="chart" id="question_wrong" style="margin-left: 80px;"></div>
      </div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    mounted() {
      this.initChart('question_done', [
        { value: 1048, name: '已刷过的题目' ,itemStyle: { color: '#04E0FA' }},
        { value: 735, name: '未刷过的题目',itemStyle: { color: '#BD8B15' } },
        
      ]);
  
      this.initChart('question_wrong', [
        { value: 782, name: '正确' ,itemStyle: { color: '#46CB85' }},
        { value: 1048, name: '错误',itemStyle: { color: '#EF737E' } },
        
      ]);
    },
    methods: {
      initChart(chartRef, data) {
        const chartDom = document.getElementById(chartRef);
        const myChart = echarts.init(chartDom);
        const option = {
          tooltip: { trigger: 'item' },
          legend: { top: '0%', left: 'center' },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: { show: false, position: 'center' },
              emphasis: { label: { show: true, fontSize: 40, fontWeight: 'bold' } },
              labelLine: { show: false },
              data: data
            }
          ]
        };
  
        option && myChart.setOption(option);
      }
    }
  };
  </script>
  
  <style scoped>
  .centered-container {
    display: flex;
    align-items: center;
    margin-left: 30px;
  }
  
  .chart-container {
    display: flex;
    justify-content: space-between;
    margin-top: 20px; /* 调整图表之间的间距 */
    margin-left: 100px;
  }
  
  .chart {
    width: 300px;
    height: 300px;
  }
  </style>
  